<template>
  <div >
    <el-form-item label="跳转功能">
        <l-tree-select :options="appTree"  v-model="config.moduleId" >
        </l-tree-select>
    </el-form-item>
    <el-form-item label="表单选择">
        <l-custmerform-select
            v-model="config.viewForm"
            @change="custmerformChange"
            :placeholder="$t('请选择')"
            >
        </l-custmerform-select>
    </el-form-item>
    <el-form-item label="表单版本">
        <l-select
            v-model="config.formVerison"
            :options="formVerisons"
            :placeholder="$t('请选择')"
            >
        </l-select>
    </el-form-item>
    <el-form-item label="标题">
        <l-select v-model="config.titleKey"   :options="formComponents" @change="handleChangeSelect($event,1)" ></l-select>
    </el-form-item>
    <el-form-item label="副标题">
        <l-select v-model="config.subTitleKey"   :options="formComponents" @change="handleChangeSelect($event,2)" ></l-select>
    </el-form-item>
    <el-form-item label="排序字段">
        <l-select
            v-model="config.orderId"
            :options="formComponents"
            placeholder="请选择"
            >
        </l-select>
    </el-form-item>
    <el-form-item label="行数限制">
        <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="config.limitRow"
            >
        </el-switch>
    </el-form-item>
    <el-form-item v-if="config.limitRow == 1" label="最大行数">
        <el-input-number v-model="config.maxRows"
            controls-position="right"
            placeholder="请输入"></el-input-number>
    </el-form-item>
  </div>
</template>
<script>
const apiForm = window.$api.custmerForm.scheme
export default {
    props: ['data'],
    inject: ["quickBiDesign","appDesign"],
    components:{
    },
    data () {
        return {
        }
    },
    computed:{
        config(){
            return this.data
        },
        appTree(){
            return this.appDesign.appTree || []
        }
    },
    asyncComputed:{
      formVerisons:{
        async get(){
            let res = []
            if(!this.$validatenull(this.config.viewForm)){
              res = await this.$awaitWraper(apiForm.getHistoryList(this.config.viewForm))
            }
            return (res || []).map(t=>{return {label:this.lr_dateFormat(t.f_CreateDate),value:t.f_Id }})
        }
      },
      formComponents:{
        async get(){
            if(this.$validatenull(this.config.formVerison)){
                return []
            }
            if(this.$validatenull(this.quickBiDesign.custmerformSchemes[this.config.formVerison])){
                const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(this.config.formVerison))) || {}
                this.quickBiDesign.custmerformSchemes[f_Id] = {f_Scheme}
                if(this.config.formVerison == f_Id){
                    return this.loadFormScheme(f_Scheme)
                }
            }
            else{
                return this.loadFormScheme(this.quickBiDesign.custmerformSchemes[this.config.formVerison].f_Scheme);
            }
            return []
        }
      }
    },
    methods:{
        custmerformChange(val){
            if(val == null){
                this.config.formVerison = ''
            }
            else{
                this.config.formVerison = val.f_SchemeId
            }            
        },
        loadFormScheme(strScheme){
            const scheme = JSON.parse(strScheme)
            const fields = []
            scheme.formInfo.tabList.forEach(tab => {
                tab.components.forEach(component =>{
                    if(!['gridtable','divider'].includes(component.type) && component.display){
                        const col = {
                            value:`${component.field.toLowerCase()}${scheme.formType==1?'':scheme.db.findIndex(t=>t.name == component.table)}`,
                            label:component.label
                        }

                        const dataTypeRes = this.getComponentDataType(component)
                        col.dataType = dataTypeRes.dataType
                        col.dataCode = dataTypeRes.code
                        col.valueKey = dataTypeRes.valueKey
                        col.labelKey = dataTypeRes.labelKey
                        col.options = dataTypeRes.options
                        col.format =  dataTypeRes.format
                        if(['rate','switch'].includes(component.type)){
                            col.setting = component
                        }
                        fields.push(col)
                    }
                })
            })
            return fields
        },


        handleChangeSelect(event,type){
            if(type == 1){
                this.titleOpt = event
            }
            else{
                this.subTitleOpt = event
            }
        },


        // 表格
        // 获取组件数据类型
        getComponentDataType(compt){
            const res = {}
            if(['radio','checkbox','select','selectMultiple','treeselect','layerselect'].includes(compt.type)){
                switch(compt.dataType){
                    case '1':
                        res.dataType = 'mydata'
                        res.options = compt.options
                        break;
                    case '2':
                        res.dataType = 'dataItem'
                        res.code = compt.dataCode
                        break;
                    case '3':
                        res.dataType = 'dataSource'
                        res.code = compt.dataCode
                        res.valueKey = compt.dataValueKey
                        res.labelKey = compt.dataLabelKey 
                        break;   
                }
            }
            else if(['datetime','createtime','modifytime'].includes(compt.type)){
                res.dataType = 'datetime'
                res.format = compt.format || 'yyyy-MM-dd HH:mm:ss'
            }
            else if(['upload'].includes(compt.type)){
                res.dataType = 'file'
            }
            else if(['uploadimg'].includes(compt.type)){
                res.dataType = 'img'
            }
            else if(['companySelect','company'].includes(compt.type)){
                res.dataType = 'company'
            }
            else if(['departmentSelect','department'].includes(compt.type)){
                res.dataType = 'department'
            }
            else if(['userSelect','createuser','modifyuser'].includes(compt.type)){
                res.dataType = 'user'
            }
            else if(['areaselect'].includes(compt.type)){

                res.dataType = 'areas'
            }
            else {
                res.dataType = compt.type
            }
            return res
        }
    }
}
</script>

